<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        
        <link rel="stylesheet" type="text/css" href="jquery.dataTables.css"/>
        <script type="text/javascript" language="javascript" src="jquery.js"></script>
        <script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf-8">
        
            $(document).ready(function() {
            	$("#individualId").click(function() {
            		var individualIdc = $("#individualId").is(':checked');
                	if(individualIdc)$("#typeRouter").attr("href", "newUserIndividual?role=Maker");
            	});
                var roleName = '${urname}';
                $("#rolen").hide();
                var x = new Array();
                if(roleName=='Maker'){
                	 $("#rolen").show();
                $.get("findAllCustomers", function(data) {
                    $.each(data, function(i, item) {
                        var myObject = new Array();
                        
                        myObject.push("<a href='findCustomerById?id="+item.id+"' >" + item.id + "</a>");  
                          
                        myObject.push(item.nameOfEntityCustomer);
                        
                        if(item.status == null)myObject.push("-");
                        else myObject.push(item.status);
                        
                        if(item.fatcaStatus == null) myObject.push("-");
                        else myObject.push(item.fatcaStatus);
                        myObject.push(item.moreInfo);
                        x.push(myObject);
                        //console.log("item : " + item.id);
                    });
                    $('#dynamic').html('<table cellpadding="0" cellspacing="0" border="0" class="display display-hover" id="example"></table>');
                    $('#example').dataTable({
                    	"aaData":x,
                        "aoColumns": [
                            {"sTitle": "Id", "sClass": "center"},
                            {"sTitle": "Name of Entity Customer", "sClass": "center"},
							{"sTitle": "Status", "sClass": "center"},
							{"sTitle": "Fatca Status", "sClass": "center"},
							{"sTitle": "Notes", "sClass": "center"}
                        ]
                    });
                });
                }
                if(roleName=='Checker'){
                	 $("#rolen").hide();
                    $.get("findAllCustomersChecker", function(data) {
                        $.each(data, function(i, item) {
                            var myObject = new Array();
                            myObject.push("<a href='selectNffe?id="+item.id+"' >" + item.id + "</a>");
                              
                            myObject.push(item.nameOfEntityCustomer);
                            
                            if(item.status == null) myObject.push("-");                            
                            else myObject.push(item.status);
                            
                            if(item.fatcaStatus == null) myObject.push("-");
                            else myObject.push(item.fatcaStatus);
                            myObject.push(item.moreInfo);
                            x.push(myObject);
                            console.log("item : " + item.id);
                        });
                        $('#dynamic').html('<table cellpadding="0" cellspacing="0" border="0" class="display display-hover" id="example"></table>');
                        $('#example').dataTable({
                        	"aaData":x,
                            "aoColumns": [
                                {"sTitle": "Id", "sClass": "center"},
                                {"sTitle": "Name of Entity Customer", "sClass": "center"},
    							{"sTitle": "Status", "sClass": "center"},
    							{"sTitle": "Fatca Status", "sClass": "center"},
    							{"sTitle": "Notes", "sClass": "center"}
                            ]
                        });
                    });
                    }
               
               
            });
        </script>
        <style type="text/css">

            .button_example{
                border:1px solid #cacaca; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
                background-color: #E6E6E6; background-image: -webkit-gradient(linear, left top, left bottom, from(#E6E6E6), to(#CCCCCC));
                background-image: -webkit-linear-gradient(top, #E6E6E6, #CCCCCC);
                background-image: -moz-linear-gradient(top, #E6E6E6, #CCCCCC);
                background-image: -ms-linear-gradient(top, #E6E6E6, #CCCCCC);
                background-image: -o-linear-gradient(top, #E6E6E6, #CCCCCC);
                background-image: linear-gradient(to bottom, #E6E6E6, #CCCCCC);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#E6E6E6, endColorstr=#CCCCCC);
            }

            .button_example:hover{
                border:1px solid #b3b3b3;
                background-color: #cdcdcd; background-image: -webkit-gradient(linear, left top, left bottom, from(#cdcdcd), to(#b3b3b3));
                background-image: -webkit-linear-gradient(top, #cdcdcd, #b3b3b3);
                background-image: -moz-linear-gradient(top, #cdcdcd, #b3b3b3);
                background-image: -ms-linear-gradient(top, #cdcdcd, #b3b3b3);
                background-image: -o-linear-gradient(top, #cdcdcd, #b3b3b3);
                background-image: linear-gradient(to bottom, #cdcdcd, #b3b3b3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#cdcdcd, endColorstr=#b3b3b3);
            }
        </style>
    </head>
    <body id="dt_example">
        <div id="container">
            <div id="demo">
               <div  id="rolen"> 
                <div  style="float:left">
                <input type="radio" name="custType" value="entity" id="entityId" checked>Entity&nbsp;&nbsp;
                <input type="radio" name="custType" value="individual" id="individualId" >Individual
                <a class="button" href="newUser?role=Maker" id="typeRouter">Add Client</a>
                </div>
                <div style="float:left;margin-left:10px;">
		         <form action="uploadClientDetails" enctype="multipart/form-data"  method="post">           
		            Client Details File :<input type="file" name="file"/>
					<input TYPE="submit" VALUE="Upload" class="button" />
		         </form>
		        </div>
               </div>

            </div><br/>
            <div id="dynamic"></div>
           
        </div>
        <br/>
        <br/>
        <br/>
 
        
    </body>
</html>